/* component */
import { BaseSelectUserFilterFormItem, BaseSelectUserFilterFormSelectField } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserFormField } from '@src/component/common/BaseSelectUser/components/Form/hooks'
/* model */
import { BaseSelectUserFormField, BaseSelectUserFormStateFieldOption } from '@src/component/common/BaseSelectUser/components/Form/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/Form/StateField.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type FormStateFieldProps = {
  field: BaseSelectUserFormField;
  options: BaseSelectUserFormStateFieldOption[];
  value: string;
}

export interface FormStateFieldSetupState {
  
}

export enum FormStateFieldEmitEventNameEnum {
  Input = 'input',
}

export type FormStateFieldInstance = ComponentInstance & FormStateFieldSetupState
export type FormStateFieldVM = ComponentRenderProxy<FormStateFieldProps> & CommonComponentInstance & FormStateFieldInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserFormStateField,
  emits: [
    FormStateFieldEmitEventNameEnum.Input
  ],
  props: {
    field: {
      type: Object as PropType<BaseSelectUserFormField>,
      default: () => ({}),
      required: true
    },
    options: {
      type: Array as PropType<BaseSelectUserFormStateFieldOption[]>,
      default: () => [],
    },
    value: {
      type: Array as PropType<string[]>,
      default: () => [],
      required: true
    }
  },
  setup(props: FormStateFieldProps, { emit }) {
    
    const { label, placeholderForSelect: placeholder } = useBaseSelectUserFormField(props)
    
    const onChangeHandler = (value: string[]) => {
      emit(FormStateFieldEmitEventNameEnum.Input, value)
    }
    
    return {
      label,
      placeholder,
      onChangeHandler
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserFormStateField}>
        
        <BaseSelectUserFilterFormItem 
          label={this.label}
        >
          <el-select 
            clearable
            collapse-tags
            value={this.value} 
            placeholder={this.placeholder}
            multiple={this.field.multiple}
            onInput={this.onChangeHandler}
          >
            {this.options.map(option => {
              return (
                <el-option
                  key={option.value}
                  label={option.label}
                  value={option.value}
                >
                  <div class="base-select-user-form-state-field-option">
                    <span 
                      class="base-select-user-form-state-field-option__around"
                      style={{
                        backgroundColor: option.color
                      }}
                    >
                    </span>
                    <span>
                      {option.label}
                    </span>
                  </div>
                </el-option>
              )
            })}
          </el-select>
        </BaseSelectUserFilterFormItem>
        
      </div>
    )
  }
})
